import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { getAlbumNewAPI, getToplistAPI, getToplistArtistAPI, getrcmdSongMenuAPI } from "../api";

export const feachHomeMenuAction = createAsyncThunk<void>("homeMenu", async (arg, { dispatch }) => {
  const { result } = await getrcmdSongMenuAPI(10)
  dispatch(changeRcdSongMenuAction(result))
  const { list } = await getToplistArtistAPI()
  dispatch(changeArtistsAction(list?.artists?.slice(0, 6)))
  const { albums } = await getAlbumNewAPI(10)
  dispatch(changeAlbumsAction(albums))
  const res = await getToplistAPI()
  dispatch(changeToplistAction(res.list.slice(11, 16)))
})


interface ISate {
  recomdSongMenus: any[]
  artists: any[],
  albums: any[],
  toplist: any[]
}
const initialState: ISate = {
  recomdSongMenus: [],
  artists: [],
  albums: [],
  toplist: []
}

const HomeSlice = createSlice({
  name: "home",
  initialState: initialState,
  reducers: {
    changeRcdSongMenuAction(state, { payload }) {
      state.recomdSongMenus = payload
    },
    changeArtistsAction(state, { payload }) {
      state.artists = payload
    },
    changeAlbumsAction(state, { payload }) {
      state.albums = payload
    },
    changeToplistAction(state, { payload }) {
      state.toplist = payload
    }
  }
})

export const { changeRcdSongMenuAction, changeArtistsAction, changeAlbumsAction, changeToplistAction } = HomeSlice.actions
export default HomeSlice.reducer